<template>
    <div class="leaderboard">
        <h2>排行榜</h2>
        <ul>
            <li v-for="(item, index) in leaderboard" @click="ToContent(item.id)" :key="index">
                <span class="badge">{{item.type}}</span>
                {{ index + 1 }}. {{ item.title }}
            </li>
        </ul>
    </div>
</template>

<script setup>
import {ref} from "vue";
import {getjournalismRanking} from "@/api/request.js";
import {useRouter} from "vue-router";

let Router=useRouter()
let leaderboard=ref([])
async function getRanking() {
  let message = await getjournalismRanking()
  for (let i = 0; i < message.records.length; i++) {
    leaderboard.value.push({
      title: message.records[i].title,
      type: getJourType(message.records[i].sentiment),
      id:message.records[i].id
    })
  }
}
getRanking()

function getJourType(sentiment) {
  switch (sentiment) {
    case "positive":
      return "利好";
    case "negative":
      return "利空";
    default:
      return "中性";
  }
}

function ToContent(id) {
  Router.push({
    path:'/journalismContent',
    query:{jourId:id}
  })
}

</script>

<style scoped>
    .leaderboard {
        width: 276px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 2px 2px 12px rgb(0 0 0 / 10%);
        overflow-y: auto;
        margin-left: 8px;
        margin-top: 35px;
    }

    h2 {
        text-align: center;
        font-size: 1.5em;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        padding: 5px 0;
        border-bottom: 1px solid #f0c9c9;
        line-height: 21px;
    }
    .badge {
        display: inline-block;
        background-color: red; /* 红色背景 */
        color: white; /* 白色文字 */
        padding: 2px 5px; /* 内边距 */
        font-size: 0.8em; /* 字体大小 */
        border-radius: 3px; /* 圆角边框 */
        margin-right: 10px; /* 右边距 */
    }
</style>